<template>
  <div ref="dashboard" class="dashboard-container">
    <el-button type="primary" size="default" @click="screen">全屏</el-button>
    <countTo :start-val="1000" :end-val="1000000" :duration="3000" />
    <el-progress :text-inside="true" :stroke-width="26" :percentage="70" color="#000" />
    <div ref="box" class="box" />
    <div class="order">
      <Order />
    </div>
    <div class="purcle">
      <Purcle />
    </div>
    <div class="words">
      <Words />
    </div>
    <div class="map">
      <Map />
    </div>
    <div class="bg-animate">
      <BgAnimate />
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import Order from './components/Order'
import Purcle from './components/Purcle'
import Words from './components/Words'
import Map from './components/Map'
import screenfull from 'screenfull'
import countTo from 'vue-count-to'

import BgAnimate from '@/components/BgAnimate/BgAnimate/BgAnimate.vue'
export default {
  components: {
    Order,
    Purcle,
    Words,
    Map,
    countTo,
    BgAnimate
  },
  created() {
    setInterval(() => {
      console.log(`${new Date().getMinutes()}:${new Date().getSeconds()}`)
    }, 1000)
  },
  mounted() {
    var myChart = echarts.init(this.$refs.box)
    // 绘制图表
    var option = {
      // 标题
      title: {
        text: 'ECharts 入门示例'
      },
      // 提示框
      tooltip: {
        backgroundColor: 'red'
      },
      // x轴
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      // y轴
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          itemStyle: {
            color: '#000'
          },
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    }
    myChart.setOption(option)
  },
  methods: {
    screen() {
      if (screenfull.isEnabled) {
        // 控制是否全屏的按钮
        screenfull.toggle(this.$refs.dashboard)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.bg-animate{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 15%;
  }
.dashboard-container{
  ::v-deep .el-progress-bar__inner{
    background-image: linear-gradient(to right, red , yellow);
  }
}
.box,.order{
  width: 800px;
  height: 400px;
}
.purcle,.words,.map{
  width: 400px;
  height: 400px;
}
</style>
